<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <#include "admin/common/header.ftl"/>
<body>
<div class="container-fixed-xs">
    <div class="user-login">
        <div class="user-login-box user-login-header">
            <h2>登录</h2>
        </div>
        <div>
            <ul class="nav nav-secondary">
                <li class="active"><a href="###" data-target="#tab2Content1" data-toggle="tab">密码登录</a></li>
                <li><a href="###" data-target="#tab2Content2" data-toggle="tab">验证码登录</a></li>
            </ul>
            <div class="tab-content">
                <#--密码登录-->
                <div class="tab-pane fade active in" id="tab2Content1">
                    <form id="loginForm" method="post" action="/signIn">
                        <div class="form-group">
                            <label for="name" class="required">用户名</label>
                            <input type="text" class="form-control" id="name" name="name" value="${name!}" placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label for="password" class="required">密码</label>
                            <input type="password" class="form-control" id="passWord" name="passWord" value="${passWord!}" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-xs-7">
                                    <label for="checkCode" class="required">验证码</label>
                                    <input type="text" class="form-control" id="checkCode" name="checkCode" placeholder="图形验证码" maxLength="4">
                                </div>
                                <div class="col-xs-5">
                                    <img src="/captcha/code" id="imgCheckCode" style="padding-top: 25px;" onclick="this.src='/captcha/code?d='+new Date()" >
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-xs-9">
                                    <input type="checkbox" id="readmeCode" name="readmeCode" title="记住密码">
                                    <span>记住密码</span>
                                </div>
                                <div class="col-xs-3">
                                    <a href="/forget.html" style="padding-left: 18px;" >忘记密码?</a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
                            <button type="button" class="btn btn-large btn-block btn-primary" id="resetBtn">重置</button>
                        </div>
                    </form>
                </div>
                <#--验证码登录-->
                <div class="tab-pane fade" id="tab2Content2">
                    <form id="codeLoginForm" method="post" action="/smsIn">
                        <div class="form-group">
                            <label for="name" class="required">手机号</label>
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号" maxlength="11">
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-xs-7">
                                    <label for="checkCode" class="required">验证码</label>
                                    <input type="text" class="form-control" id="checkCode" name="smsCheckCode" placeholder="图形验证码" maxLength="4">
                                </div>
                                <div class="col-xs-5">
                                    <img src="/captcha/code" id="imgCheckCode" style="padding-top: 25px;" onclick="this.src='/captcha/code?d='+new Date()" >
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-xs-7">
                                    <label for="emailCode" class="required">短信验证码</label>
                                    <input type="text" class="form-control" id="smsCode" name="smsCode" placeholder="短信验证码" maxLength="4">
                                </div>
                                <div class="col-xs-5">
                                    <button type="button" class="btn" style="margin-top: 25px; width: 148px;" id="getSmsCode">获取验证码</button>
                                </div>
                            </div>
                        </div>
                        <#--<div class="form-group">
                            <div class="row">
                                <div class="col-xs-9">
                                    <input type="checkbox" id="readmeCode" name="readmeCode" title="记住密码">
                                    <span>记住密码</span>
                                </div>
                                <div class="col-xs-3">
                                    <a href="/forget.html" style="padding-left: 18px;" >忘记密码?</a>
                                </div>
                            </div>
                        </div>-->
                        <div class="form-group">
                            <button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
                            <button type="button" class="btn btn-large btn-block btn-primary" id="codeResetBtn">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <#--<form id="loginForm" method="post" action="/signIn">
            <div class="form-group">
                <label for="name" class="required">用户名</label>
                <input type="text" class="form-control" id="name" name="name" value="${name!}" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="password" class="required">密码</label>
                <input type="password" class="form-control" id="passWord" name="passWord" value="${passWord!}" placeholder="密码">
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-7">
                        <label for="checkCode" class="required">验证码</label>
                        <input type="text" class="form-control" id="checkCode" name="checkCode" placeholder="图形验证码" maxLength="4">
                    </div>
                    <div class="col-xs-5">
                        <img src="/captcha/code" id="imgCheckCode" style="padding-top: 25px;" onclick="this.src='/captcha/code?d='+new Date()" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-9">
                        <input type="checkbox" id="readmeCode" name="readmeCode" title="记住密码">
                        <span>记住密码</span>
                    </div>
                    <div class="col-xs-3">
                        <a href="/forget.html" style="padding-left: 18px;" >忘记密码?</a>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
                <button type="button" class="btn btn-large btn-block btn-primary" id="resetBtn">重置</button>
            </div>
        </form>-->
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 18,
                            message: '用户名长度必须在5到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                passWord: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                checkCode: {
                    message: '验证码验证失败',
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv',function (e) {
            // Prevent form submission
               e.preventDefault();

               // Get the form instance
               var $form = $(e.target);

               // Get the BootstrapValidator instance
               var bv = $form.data('bootstrapValidator');

               // Use Ajax to submit form data
               $.post($form.attr('action'), $form.serialize(), function(result) {
                     console.log(result);
                     if (result.errorCode == 'y') {
                        location.href = "http://localhost:8080/";
                     } else {
                         new $.zui.Messager('提示消息：' + result.errorText, {
                             icon: 'exclamation-sign',
                             type: 'danger',
                             time: 2000
                         }).show();
                     }
               }, 'json');
        });
        $('#resetBtn').click(function() {
            $('#loginForm').data('bootstrapValidator').resetForm(true);
        });
        $('#codeLoginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                phone: {
                    message: '手机号验证失败',
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 11,
                            message: '手机号长度最大11位'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手机号格式不正确'
                        }
                    }
                },
                smsCheckCode: {
                    message: '图形验证码验证失败',
                    validators: {
                        notEmpty: {
                            message: '图形验证码不能为空'
                        }
                    }
                },
                smsCode: {
                    message: '短信验证码验证失败',
                    validators: {
                        notEmpty: {
                            message: '短信验证码不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv',function (e) {
            // Prevent form submission
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
                if (result.errorCode == 'y') {
                    location.href = "http://localhost:8080/";
                } else {
                    new $.zui.Messager('提示消息：' + result.errorText, {
                        icon: 'exclamation-sign',
                        type: 'danger',
                        time: 2000
                    }).show();
                }
            }, 'json');
        });
        $('#codeResetBtn').click(function() {
            $('#codeLoginForm').data('bootstrapValidator').resetForm(true);
        });
    });
    // 获取短信验证码
    $("#getSmsCode").on("click", function () {
        var phone = $("input[name='phone']").val();
        var smsCheckCode = $("input[name='smsCheckCode']").val();
        // 验证手机号是否为空
        if (phone == null) {
            new $.zui.Messager('提示消息：' + "请输入手机号", {
                icon: 'exclamation-sign',
                type: 'danger',
                time: 2000
            }).show();
            return;
        }
        // 手机号正则表达式
        var phoneReg = /^1\d{10}$/;
        if (!phoneReg.test(phone)) {
            new $.zui.Messager('提示消息：' + "请输入正确的手机号", {
                icon: 'exclamation-sign',
                type: 'danger',
                time: 2000
            }).show();
            return;
        }
        // 验证手机号是否存在
        $.ajax({
            type : "GET",
            url : "/phone/check",
            contentType: "application/json;charset=utf-8",
            data : {
                phone : phone
            },
            dataType:"json",
            success : function (result) {
                if (result.errorCode == 'y') {
                    // 验证图形验证码
                    if (smsCheckCode == null) {
                        new $.zui.Messager('提示消息：' + "请输入图形验证码", {
                            icon: 'exclamation-sign',
                            type: 'danger',
                            time: 2000
                        }).show();
                        return;
                    }
                    // 验证图形验证码是否正确
                    $.ajax({
                        type : "GET",
                        url : "/captcha/check",
                        contentType: "application/json;charset=utf-8",
                        data : {
                            checkCode : smsCheckCode
                        },
                        dataType:"json",
                        success : function (result) {
                            if (result.errorCode == 'y') {
                                // 异步发送短信验证码
                                $.ajax({
                                    type : "GET",
                                    url : "/phone/code",
                                    contentType: "application/json;charset=utf-8",
                                    data : {
                                        to : phone
                                    },
                                    dataType:"json",
                                    success : function (result) {
                                        if (result.errorCode == 'y') {
                                            new $.zui.Messager('提示消息：' + result.errorText, {
                                                icon: 'exclamation-sign',
                                                type: 'success',
                                                time: 2000
                                            }).show();
                                        } else {
                                            new $.zui.Messager('提示消息：' + result.errorText, {
                                                icon: 'exclamation-sign',
                                                type: 'danger',
                                                time: 2000
                                            }).show();
                                        }
                                    }
                                });
                            } else {
                                new $.zui.Messager('提示消息：' + result.errorText, {
                                    icon: 'exclamation-sign',
                                    type: 'danger',
                                    time: 2000
                                }).show();
                            }
                        }
                    });
                } else {
                    new $.zui.Messager('提示消息：' + result.errorText, {
                        icon: 'exclamation-sign',
                        type: 'danger',
                        time: 2000
                    }).show();
                }
            }
        });
    });
</script>
<style>
    body {
        background-color: #F0F0F0;
        background-attachment:fixed;
        background-size:100%;
        height:auto;
    }
    .user-login {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .user-login-header {
        text-align: center;
    }
    .user-login-box {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
</style>
</body>
</html>